<template>
  <div class="box">
    <routerLink to="/permission">permission</routerLink>
    <routerLink to="/loading">loading</routerLink>
    <routerLink to="/drag">drag</routerLink>
    <routerLink to="/validate">validate</routerLink>
    <routerLink to="/mouse">mouse</routerLink>
    <routerLink to="/intersection">intersection</routerLink>
    <routerLink to="/hotKey">hotKey</routerLink>
  </div>
  <routerView />
</template>
<script setup>
import { useRoute } from "vue-router";
import { ref, computed } from "vue";
const route = useRoute();
</script>
<style soped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.box {
  display: flex;
  margin-bottom: 20px;
}

a {
  padding: 10px 20px;
  margin-right: 15px;
  border: 1px solid #ccc;
  outline: none;
  text-decoration: none;
  color: #555;
  transition: all 0.35s linear;
}

a:hover,
.router-link-active {
  background-color: sandybrown;
  color: #fff;
}
</style>
